// ui/components/WhiteboardList.js
import WhiteboardItem from './WhiteboardItem.js'; // Assuming WhiteboardItem.js has been created

export default {
  name: 'WhiteboardList',
  components: {
    'whiteboard-item': WhiteboardItem,
    // ElScrollbar is globally registered
  },
  props: {
    items: {
      type: Array, // Was Array as PropType<WhiteboardItemModel[]>
      required: true,
      default: () => []
      // JSDoc for reference:
      /**
       * @type {Array<{
       *   reference_id: string;
       *   display_name: string;
       *   full_local_path: string;
       *   uploader_participant_id: string;
       *   timestamp_added: string;
       * }>}
       */
    }
  },
  emits: ['remove-item-requested'],
  setup(props, { emit }) {
    function handleRemoveItem(itemId) { // itemId was string
      emit('remove-item-requested', itemId);
    }

    return {
      // props are automatically available
      handleRemoveItem,
    };
  },
  template: `
  <el-scrollbar class="whiteboard-list-scrollbar" height="100%">
    <div class="whiteboard-list-container">
      <ul v-if="items && items.length > 0" class="whiteboard-list">
        <whiteboard-item
          v-for="item in items"
          :key="item.reference_id"
          :item="item"
          @remove="handleRemoveItem"
        />
      </ul>
      <!-- Empty list message is now handled by WhiteboardPanel.vue -->
    </div>
  </el-scrollbar>
  `
};